<template>
  <div class="centextBar" id="banner" style="min-height: 100%;">
    <div class="title">
      <div class="title"><strong>项目列表</strong></div>
      <div class="buttonBar float-right">
        <button type="button" class="btn"
                style="margin-right:30px;color: #5bc590; background-color: #fff; border-color: #5bc590;"
                @click="addProject" >+新增项目
        </button>
      </div>
      <hr style="width: 100%; height: 1px; background-color: #ccc"/>
      <div class="buttonBar float-left" style="vertical-align:baseline;">
        <span>项目名称：</span>
        <input  v-model="projectNameComtent" type="text" class="searchTxt" id="searchUserNameBar" value="" placeholder=""/>
        <span>项目编号：</span>
        <input v-model="projectNumberComtent" type="text" class="searchTxt" id="searchDisplayNameBar" value="" placeholder=""/>
        <span>状态：</span>
        <select id="status"  class="form-control">
          <option value="default" selected="selected">全部</option>
          <option value="UNAPPROVED">已暂停</option>
          <option value="APPROVED">已发布</option>
          <option value="DEFRIEND">待发布</option>
        </select>
        <div id="queryBt" @click="getProject" style="margin-left:25px;margin-top: 22px;">查询</div>
      </div>
      <div id="queryBtClear" @click="clearProject" class="qbc" style="">查询重置</div>
      <div class="clear"></div>
    </div>
    <div class="tableBox" style="height:100%">
      <table class="table table-striped">
        <thead>
        <tr>
          <th width="5%">序号</th>
          <th width="15%">项目名称</th>
          <th width="15%">项目编号</th>
          <th width="15%">所属公司</th>
          <th width="10%">负责人</th>
          <th width="10%">项目状态</th>
          <th width="15%">创建时间</th>
          <th width="10%">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="line in projectList">
          <td>{{$index + 1}}</td>
          <td>{{line.projectName}}</td>
          <td>{{line.projectNumber}}</td>
          <td>{{line.company}}</td>
          <td>{{line.displayName}}</td>
          <td v-show="line.status === 'UNAPPROVED'" style="color: #ed3a3a;">已暂停</td>
          <td v-show="line.status === 'APPROVED'" style="color: #28b855;">已发布</td>
          <td v-show="line.status === 'DEFRIEND'" style="color: #909090;">待发布</td>
          <td>
            {{line.createTime}}
          </td>
          <!--查看详情按钮 -->
          <td><a @click="showDetails" style="color:#50e392" href="javascript:void(0)">查看详情</a></td>
        </tr>
        </tbody>
      </table>
      <div class="loading">
        正在加载...
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.getProject()
    },
    name: "project",
    data() {
      return {
        projectList: [{
          projectName: '第一个项目',
          projectNumber: '123455678901',
          company: '爱码学院',
          displayName: '超级管理员',
          status: 'DEFRIEND',
          createTime: '2017-12-14 12：00：00'
        }],
        projectNameComtent:'',
        projectNumberComtent:''
      }
    },
    methods:{
      getProject() {
        var self = this
        let params = {
          pageSize: '',
          currentPage:'',
          projectName:this.projectNameComtent,
          projectNumber: this.projectNumberComtent,
          status:'DEFRIEND' ,
        }
        self.$http.post('project/projectList', params)
          .then((response) => {
            // 响应成功回调
            console.log(response)
            if (!response.error) {
              console.log(response.result)
              for (var i = 0; i < response.result.length; i++) {
                response.result[i].createTime = response.result[i].createTime.substring(-1, 19)
              }
              this.projectList = response.result;
            }
          })
          .then((response) => {
            console.log(response)
          })
          .catch((reject) => {
            console.log(reject)
          })
      },
      addProject(){
        console.log(this)
        var self = this
        self.$router.push({
          path: '/project_add'
        })
      },
      showDetails() {
        var self = this
        self.$router.push({
          path: '/project_details'
        })
      },
      clearProject(){
        this.projectNameComtent='';
          this.projectNumberComtent=''
      }
    }
  }
</script>
<style scoped>
  .qbc {
    font-size: 16px;
    font-weight: lighter;
    line-height: 35px;
    color: #fff;
    background: #5bc590;
    text-align: center;
    border-radius: 5px;
    float: left;
    width: 100px;
    ine-height: 35px;
    height: 35px;
    cursor: pointer;
    margin-top: 22px;
    margin-left: 25px;
  }
</style>
